import React, { Component } from 'react';
import axios from 'axios';
import StateCom from '../../components/state-com';
class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            "con":"这是页面内容",
            "stateProps":'默认值',
            "obj":{
                "t1":'11'
            },
            mediareports:{
                page_number:'2',
                page_size:'10'
            }
        }
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    componentDidMount(){
        const cfg = this.state.mediareports;
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            console.log(res.data)
        })
        this.getApi('/wapi/zpgeek/resume/geek/preview/data.json',{},{}).then((res)=>{
            console.log(res)
        })
        this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
            console.log(res.data)
        })
        this.timer = setTimeout(()=>{
            this.setState({
                con:'88888888'
            })
            this.setState((state,props)=>({
                stateProps:state.con+props.title
            }))
            this.setState({
                obj:Object.assign(this.state.obj,{'test':'news'})
            })
            console.log(this.state.obj)
        },3000)
        // ajax 请求放在哪？
        // 设置定时器所在的周期内
        // componentDidMount
        // Object.assign(target,{},{})
        // setTimeout 改成setInterval es5  es6
    }
    componentWillUnmount(){
        clearTimeout(this.timer);
        /* 如果多组件交互通信（ajax）;
           并且当前组件的ajax 并没有请求完
           直接被点到另一个页面了
           xhr.abort();
        */

    }
    render(){
        return(
            <div className="state-page">
                <h2>这是页面的标题：{this.props.title}</h2>
                <div>这是页面的内容：{this.state.con}</div>
                <StateCom con={this.state.con}/>
                <div>{this.state.stateProps}</div>
            </div>
        )
    }
}
export default View;
